<template>
	<!-- 导航栏 -->
	<view class="navTabBox">
		<view class="acea-row row-middle row-between category-box" style="flex-wrap: wrap;">
			<view class="longTab" :style="isOpenSx?'':'width: 100%'">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="longItem" :style='"width:"+isWidth+"px"' :data-index="index"
						:class="index==categoryon?'click':''" v-for="(item,index) in categoryList" :key="index"
						:id="'id'+index" @click="longClick(index,item)">{{item.name}}</view>
					<!-- 					<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
						<view class="underline"></view>
					</view> -->
				</scroll-view>
			</view>
			<view class="sort-box" v-if="sortList.length>0">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<template v-for="(item,index) in sortList">
						<view :key="index" :class="['sort',sortOn==index?'sort-on':'']" @click="sortClick(index,item)">
							{{item.name}}</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import zdyFilter from '@/pages/others/components/zdyFilter/index.vue'
	import {
		classificationList
	} from "@/api/subletOfShop.js";
	export default {
		name: 'navtab-filter',
		components: {
			zdyFilter
		},
		data() {
			return {
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				// categoryon: 0,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				sortList: [],
				categoryon: 0,
				sortOn: 0,
				categoryList: [{
						name: '商铺房屋',
						cate: [{
								type: 0,
								name: '租转'
							},
							{
								type: 8,
								name: '出售'
							},
							{
								type: 1,
								name: '求租'
							},
							{
								type: 2,
								name: '求购'
							}
						]
					},
					{
						name: '招工求职',
						cate: [{
								type: 3,
								name: '招工'
							},
							{
								type: 7,
								name: '求职'
							},
						]
					},
					{
						name: '商家服务',
						cate: [{
								type: 4,
								name: '提供服务'
							},
							{
								type: 11,
								name: '找服务'
							},
						]
					}, {
						name: '二手',
						cate: [{
								type: 5,
								name: '发布'
							},
							{
								type: 12,
								name: '求购'
							},
						]
					}, {
						name: '供应链',
						cate: [{
								type: 6,
								name: '发布'
							},
							{
								type: 9,
								name: '求购'
							},
						]
					},
				]
			};
		},
		props: {

		},
		mounted() {

		},
		watch: {
			categoryon(val) {
				let index = val;
				if (this.categoryList.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.$nextTick(() => {
						this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
					})
				}
				this.isLeft = this.categoryon * this.isWidth //设置下划线位置
			}
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})

		},
		mounted() {
			this.isLeft = this.categoryon * this.isWidth;
			this.setSortList(this.categoryList[this.categoryon])
		},
		methods: {

			longClick(index, item) {
				if (this.categoryList.length >= 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.isLeft = index * this.isWidth //设置下划线位置
				this.categoryon = index;
				this.setSortList(item);
				console.log("this.sortList", this.sortList)
				// this.$emit('changecategoryon', {
				// 	index,
				// 	type
				// })

				//数据处理

			},
			setSortList(item) {
				if (item.type) {
					this.sortList = []

					this.$emit('toggle', item)
				} else {
					this.sortOn = 0
					this.sortList = item.cate;
					this.$emit('toggle', this.sortList[0])
				}


			},
			sortClick(index, item) {
				this.sortOn = index;
				this.$emit('toggle', this.sortList[index])
			},
		}
	}
</script>

<style lang="scss">
	.navTabBox {
		background: #ffffff;
		padding: 0 24rpx 20rpx;

		.category-box {
			color: rgba(50, 50, 51, 1);
			font-size: 32rpx;
			font-weight: 500;

			.click {
				color: rgba(238, 33, 45, 1);
			}

			.longTab {
				width: 86%;
				/* #ifdef H5 */
				padding-bottom: 20rpx;
				/* #endif */
				/* #ifdef MP */
				padding-top: 20rpx;
				// padding-bottom: 20rpx;

				/* #endif */
				.longItem {
					height: 50upx;
					display: inline-block;
					line-height: 50upx;
					text-align: center;
					font-size: 32rpx;

					&.click {
						font-weight: bold;
					}
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: .5s;

					.underline {
						width: 33rpx;
						height: 4rpx;
						background-color: rgba(238, 33, 45, 1);
					}
				}
			}
		}

		.filtration {
			margin-left: 18rpx;
			padding: 12rpx 0 16rpx;

			.text {
				width: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
			}

			.sanjiao {
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top-color: rgba(128, 128, 128, 1);
				border-bottom-width: 0;
			}
		}
	}

	.sort-box {
		width: 100%;
		padding: 12rpx 0 0;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	/* 筛选 */
	.bg-mask {
		position: fixed;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		// z-index: 90;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>